<template>
  <div class="page-view">
    <van-field
      v-model="CardNo"
      clearable
      placeholder="请输入您的身份证号"
      class="form"
    />
    <div class="btn-div">
      <van-button
        type="primary"
        class="btn"
        @click="onSubmit"
      >
        确定
      </van-button>
    </div>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
import { SET_USER_INFO } from '@/store/mutations'
import { CERT_STR } from '@/lib/reg'
const CardReg = new RegExp(CERT_STR)
export default Vue.extend({
  data () {
    return {
      CardNo: this.$store.state.userInfo.CardNo,
    }
  },
  methods: {
    isValidateCardNo () {
      let oldCardNo = this.$store.state.userInfo.CardNo
      if (this.CardNo === '') {
        this.$toast('请输入要更换的身份证号！')
        return false
      }
      if (this.CardNo === oldCardNo) {
        this.$toast('请输入新的身份证号！')
        return false
      }
      if (!CardReg.test(this.CardNo)) {
        this.$toast('请如实填写您的身份证号，长度必须为15位或18位且只能含有数字和大写字母X！')
        return false
      }
      return true
    },
    // 提交
    onSubmit () {
      if (this.isValidateCardNo()) {
        this.$axios({
          url: 'user/UpdateCardNo',
          data: {
            CardNo: this.CardNo,
          },
        }).then(res => {
          this.$store.commit(SET_USER_INFO, { CardNo: this.CardNo })
          this.$router.back()
          setTimeout(() => {
            this.$toast({ message: '更新成功！', duration: 1000 })
          }, 100)
        })
      }
    },
  },
})
</script>
<style lang="scss" scoped>
.page-view{
  background: #ffffff;
  width: 100%;
  height: 100%;
  color: #A4A9B2;
  padding-top: 60px;
}
.van-cell:not(:last-child):after {
  border: none;
}
 /deep/ .van-field__control {
  color: #A4A9B2;
}

.form{
  color: #A4A9B2;
  font-size: 32px;
  width: 600px;
  // height: 113px;
  margin:0 auto;
  padding-left: 0px;
  // line-height: 110px;
  @include px1border;
}
.btn-div{
  text-align: center;
  margin-top: 404px;
}
.btn{
  width: 532px;
  height: 80px;
  font-size: 32px;
  background-color: $primary-web;
  border: none;
}
</style>
